<template>
    <div class="register">
        <div>{{formValidate.id}}</div>
        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
            <FormItem label="公司名称" prop="company_name">
                <Input v-model="formValidate.company_name" placeholder="请输入公司名称"></Input>
            </FormItem>
            <FormItem label="公司地址" prop="company_address">
                <Input v-model="formValidate.company_address" placeholder="请输入公司地址"></Input>
            </FormItem>
            <FormItem label="公司电话" prop="company_mobile">
                <Input v-model="formValidate.company_mobile" placeholder="请输入公司电话"></Input>
            </FormItem>
            <FormItem label="联系人姓名" prop="conn_username">
                <Input v-model="formValidate.conn_username" placeholder="请输入联系人姓名"></Input>
            </FormItem>
            <FormItem label="联系人电话" prop="conn_usermobile">
                <Input v-model="formValidate.conn_usermobile" placeholder="请输入联系人电话"></Input>
            </FormItem>
            <FormItem label="套餐选择" prop="meal_id">
                <Select v-model="formValidate.meal_id" style="width:120" >
                    <Option v-for="item in mealList" :value="item.id" :key="item.id">{{ item.meal }}:&nbsp;&nbsp;{{item.pay_fee}}元&nbsp;/&nbsp;{{item.count}}次</Option>
                </Select>
            </FormItem>
            <FormItem label="备注" prop="backup">
                <Input v-model="formValidate.backup" type="textarea" :autosize="{minRows: 2,maxRows: 5}"
                       placeholder="请输入..."></Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">创建</Button>
                <Button @click="handleReset('formValidate')" style="margin-left: 8px">取消</Button>
            </FormItem>
        </Form>
    </div>
</template>
<script>
import { addUser, getMealList } from '@/api/registered/ocr'
export default {
  data () {
    return {
      // 创建用户存储数据的对象
      formValidate: {
        company_name: '',
        company_address: '',
        company_mobile: '',
        conn_username: '',
        conn_usermobile: '',
        backup: '',
        meal_id: '',
        count: ''
      },
      // 表单校验对象
      ruleValidate: {
        company_name: [
          { required: true, message: '不能为空', trigger: 'blur' },
          { min: 3, max: 20, message: '名称长度3-20' }
        ],
        conn_usermobile: [
          { required: true, message: '请输入手机号码', trigger: 'change' }
        ],
        meal_id: [
          { required: true, message: '请选择', trigger: 'change' }
        ]
      },
      // 套餐数据存储
      mealList: []
    }
  },
  mounted () {
    // 获取套餐信息
    this.initialize()
  },
  methods: {
    // 初始化
    initialize () {
      getMealList().then(ret => {
        if (ret.data.errcode === 1001) {
          this.mealList = ret.data.data
        } else {
          this.warning()
        }
      })
    },
    // 提示信息
    success () {
      this.$Message.success('成功')
    },
    warning () {
      this.$Message.warning('数据加载失败')
    },
    // 创建用户
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          addUser(this.formValidate).then(ret => {
            if (ret.data.errcode === 1001) {
              this.$Message.success('成功!')
            } else {
              this.$Message.error('失败!')
            }
          })
        } else {
        }
      })
    },
    // 取消创建
    handleReset (name) {
      this.$refs[name].resetFields()
    }
  }
}
</script>
<style scoped>
    .register {
        width: 400px;
        height: 130px;
    }
</style>
